<template>
	<view class="search">
		<view class="search-top">
			<u-navbar
				class="nav-bar" 
				:is-back="true" 
				:border-bottom="false" 
				:back-text="backText" 
				back-icon-color="#171717">
				<view class="search-input">
					<SearchInput
						:isSearch="true"
						:height="68"
						:current="current" />
				</view>
			</u-navbar>
			<view class="tabs">
				<block v-for="(item, index) in tabList" :key="index">
					<view class="tabs-item" :class="{active: tabCurrent == index}" @click="handleChangeTabs(index)">
						{{item.name}}
					</view>
				</block>
			</view>
		</view>
		<view class="search-content">
			<swiper class="search-content-swiper" :current="tabCurrent" @change="handleCangeSwiper">
				<swiper-item class="search-content-swiper-item">
					<scroll-view scroll-y >
						<Empty text="暂无搜索内容" style="display: none" />
						<ProductList :productList="productList" />
					</scroll-view>
				</swiper-item>
				<swiper-item class="search-content-swiper-item">
					<scroll-view scroll-y >
						<Empty text="暂无搜索内容" style="display: none" />
						<view style="padding: 0 15rpx">
							<TalentList :list="talentList" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import SearchInput from '@/components/search-input/index.vue'
import Empty from '@/components/empty/index.vue'
import ProductList from '@/components/product-list/index.vue'
import TalentList from '@/components/talent-list/index.vue'
export default {
	components: {
		SearchInput,
		Empty,
		ProductList,
		TalentList
	},
	data() {
		return {
			backText: '',
			current: 0,
			tabCurrent: 0,
			scrollViewH: 0,
			tabList: [
				{
					id: 1,
					name: '通告'
				},
				{
					id: 2,
					name: '达人'
				}
			],
			productList: [
				{
					id: 1,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				},
				{
					id: 2,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				},
				{
					id: 3,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				},
				{
					id: 4,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				},
				{
					id: 5,
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					brand_name: '品牌名称',
					fans_ask: '5000+',
					ckecked: '2000查看/1天前',
					source: '抖音'
				}
			],
			talentList: [
				{
					id: 1,
					title: '名字名字',
					url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
					fans_num: '6.8',
					price: '500',
					location: '杭州'
				},
				{
					id: 2,
					title: '名字名字',
					url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
					fans_num: '6.8',
					price: '500',
					location: '杭州'
				},
				{
					id: 3,
					title: '名字名字',
					url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
					fans_num: '6.8',
					price: '500',
					location: '杭州'
				},
				{
					id: 4,
					title: '名字名字',
					url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
					fans_num: '6.8',
					price: '500',
					location: '杭州'
				},
				{
					id: 5,
					title: '名字名字',
					url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
					fans_num: '6.8',
					price: '500',
					location: '杭州'
				}
			]
		};
	},
	onLoad() {
		let info = uni.createSelectorQuery().select(".search-content")
		info.boundingClientRect((data) => {
			console.log(data.height)
			this.scrollViewH = data.height
		}).exec()
	},
	methods: {
		handleChangeTabs(index) {
			this.tabCurrent = index
		},
		handleCangeSwiper(e) {
			this.tabCurrent = e.detail.current
		}
	},
	options: { styleIsolation: 'shared' }
}
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	&-top {
		.tabs {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 144rpx;
			background-color: #f5f5f5;
			&-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160rpx;
				height: 64rpx;
				background-color: $u-bg-white-color;
				border-radius: 64rpx;
				&:first-of-type {
					margin-right: 20rpx;
				}
				&.active {
					transition: all .3;
					background-color: $u-btn-bg-color;
					font-weight: 600;
					color: $u-text-white-color;
				}
			}
		}
	}
	&-content {
		display: flex;
		flex: 1;
		height: 100%;
		&-swiper {
			flex: 1;
			height: 100%;
		}
	}
}
</style>
